<template>
	<view class="container">
		<!-- 文章区域 -->
		<view class="article">
			<view class="article-title">Article</view>
			<!-- 文章内容展示 -->
			<view class="article-area">
				<Cards />
				<!-- 		<view class="article-area-title">每日推荐</view>
				<view class="article-area-info">
					I'll show the step by step, day by day process to build better products, just as Google, Slack, KLM and manu other do. I'll show the step by
					step, day by day process to build better products, just as Google, Slack, KLM and manu other do. I'll show the step by step, day by day
					process to build better products, just as Google, Slack, KLM and manu other do. I'll show the step by step, day by day process to build
					better products, just as Google, Slack, KLM and manu other do.
				</view> -->
			</view>
		</view>
		<!-- 作品集区域 -->
		<view class="porfolio">
			<!-- 轮播图组件，用于切换文章类型（文章或视频）的展示 -->
			<view class="swiper">
				<view class="swiper-item" :class="{ active: currentSwiper == 0 }" @click="changeSwiper(0)">Article
				</view>
				<view class="swiper-item" :class="{ active: currentSwiper == 1 }" @click="changeSwiper(1)">Video</view>
			</view>
			<!-- 作品列表，循环展示每个作品的信息 -->
			<view class="porfolio-list">
				<view class="porfolio-card" v-for="item in articles" :key="item.articleId || item.videoId"
					@click="goArticle(item)">
					<view class="porfolio-card-info">
						<!-- 作品个人信息，包括头像和姓名 -->
						<view class="porfolio-card-info-person">
							<image :src="item.createAvatar" />
							<text>{{ item.createBy }}</text>
						</view>
						<!-- 作品详细描述信息 -->
						<view class="porfolio-card-info-text">{{ item.articleDesc || item.videoDesc }}</view>
					</view>
					<!-- 作品相关视频的占位符 -->
					<view v-if="currentSwiper == 1" class="porfolio-card-video"
						:style="{ backgroundImage: `url(${item.videoCoverUrl})` }"></view>
					<view v-else class="porfolio-card-image">
						<image :src="item.articleCoverUrl" />
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 底部导航栏组件 -->
	<Tabbar />
</template>

<script setup>
	import Tabbar from '@/components/Tabbar/Tabbar.vue';
	import Cards from './components/cards.vue';
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getArticleList,
		getVideoList
	} from '@/api/portfolio';

	import useUserStore from '@/store/user';
	import {
		storeToRefs
	} from 'pinia';
	import {
		navigateTo
	} from '@/utils/index.js'

	const userStore = useUserStore();

	const {
		userInfo
	} = storeToRefs(userStore);

	// 当前选中的Swiper索引
	const currentSwiper = ref(0);

	// 文章数据列表
	// const articles = ref([
	// 	{
	// 		id: 1,
	// 		person: 'Laurel Seilha',
	// 		text: 'How to get feedback on their products in just 5 days',
	// 		avatar: '/static/logo.png',
	// 	},
	// 	{
	// 		id: 2,
	// 		person: 'Laurel Seilha',
	// 		text: 'How to get feedback on their products in just 5 days',
	// 		avatar: '/static/logo.png',
	// 	},
	// 	{
	// 		id: 3,
	// 		person: 'Laurel Seilha',
	// 		text: 'How to get feedback on their products in just 5 days',
	// 		avatar: '/static/logo.png',
	// 	},
	// 	{
	// 		id: 4,
	// 		person: 'Laurel Seilha',
	// 		text: 'How to get feedback on their products in just 5 days',
	// 		avatar: '/static/logo.png',
	// 	},
	// 	{
	// 		id: 5,
	// 		person: 'Laurel Seilha',
	// 		text: 'How to get feedback on their products in just 5 days',
	// 		avatar: '/static/logo.png',
	// 	},
	// 	{
	// 		id: 6,
	// 		person: 'Laurel Seilha',
	// 		text: 'How to get feedback on their products in just 5 days',
	// 		avatar: '/static/logo.png',
	// 	},
	// ]);

	const articles = ref([]);

	/**
	 * 切换Swiper的函数
	 * @param {Number} value - 需要切换到的Swiper索引值
	 */
	const changeSwiper = (value = 0) => {
		currentSwiper.value = value;
		articles.value = [];
		if (currentSwiper.value == 0) {
			getArticle();
		} else {
			getVideo();
		}
	};

	const getArticle = async () => {
		const res = await getArticleList();
		console.log('🚀 ~ getArticle ~ res:', res);
		articles.value = res.rows;
	};

	const getVideo = async () => {
		const res = await getVideoList();
		articles.value = res.rows;
	};

	const goArticle = (item) => {
		// userStore.currentArticle = item;
		const id = currentSwiper.value == 0 ? item.articleId : item.videoId;
		navigateTo(`/pages/article/index?id=${id}&type=${currentSwiper.value}`);
	};

	onMounted(() => {
		changeSwiper();
	});
</script>

<style lang="scss" scoped>
	@import './portfolio.scss';
</style>